<template>
  <div class="contents">
    <PanelTitle title="项目" />
    <div class="mt">

      <a-carousel autoplay dotsClass="yuan-dots">
        <div v-for="item in projectList" class="card">
          <img class="img-item" :src="item.imgList[0]" alt="" srcset="">
          <div class="desc">
            【{{item.projectName}}】 {{ item.remark }}</div>
          <OrderList :list="item.projectGoodsList"></OrderList>
        </div>

      </a-carousel>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import echarts from "@/components/echarts";
import PanelTitle from "../../component/PanelTitle.vue";
import http from "@/api/http";
import { env } from "@/utils/env";
import { fitChartSize } from "@/utils/dataUtil.js";
import dayjs from "dayjs";
import OrderList from './orderList.vue'
import { countOrderProject } from "@/api/orderApi";
const projectList = ref<any[]>([])
onMounted(async () => {
  let res = await countOrderProject({})
  projectList.value = res.data
})
</script>


<style scoped lang="scss">
.contents {
  background: linear-gradient(to bottom,
      rgba(5, 79, 99),
      rgba(5, 79, 99, 0.1),
      rgba(5, 79, 99));
  border-radius: vh(8);
  border: vh(1) solid rgba(6, 112, 180, 1);

  .mt {
    margin-top: vh(-40);

  }
}

.card {}

.img-item {
  height: 20vh;
  display: block;
  margin: 0 auto;
}

.desc {
  padding: 1vh 1vh 0 1vh;
  color: #fff;
  overflow: hidden;
  height: 15vh;
  font-size: vh(12);
  line-height: vh(28);
  margin: 0 0 2vh 0;
}
</style>
<style>
.yuan-dots {
  transform: translateY(5vh);
}
</style>
